<template>
  <div class="broadcast_storage">
    <div v-if="broadcastListStr">
      <!-- <div class="big_title_style" style="font-size: 18px">未入库商品</div> -->

      <div class="box-shadow">
        <div class="top_btn">
          <div>
            <el-button size="small" @click="statusCut(0)" type="primary" plain>未审核</el-button>
            <el-button size="small" @click="statusCut(1)" type="primary" plain>审核中</el-button>
            <el-button size="small" @click="statusCut(3)" type='danger' plain>驳回</el-button>
          </div>

          <el-button @click="toCommodity" type="primary" size="small">添加商品</el-button>
        </div>

        <div style="margin-top: 20px;">
          <el-table border :data="info" style="width: 100%">
            <el-table-column prop="name" label="基本信息">
              <template slot-scope="scope">
                <div style="display: flex; line-height: 80px">

                  <div
                    style="width: 100px; height: 100px"
                    v-html="imgTransition(scope.row.coverImgUrl)"
                  ></div>
                  <!-- <div style="width: 100px ; height:100px" v-html="imgTransition(scope.row.cover_img)"></div> -->
                  <div style="margin-top: 10px; margin-left: 5px">
                    <div>{{ scope.row.name }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" width="100">
            </el-table-column>
            <el-table-column prop="url" label="链接"></el-table-column>
            <el-table-column prop="audit_status" label="状态" width="150">
              <template slot-scope="scope">
                <div>{{ state(scope.row.audit_status) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <div v-if="scope.row.operation == 1">
                  <el-col :span="6">
                    <span v-if="scope.row.audit_status == 1">
                    <a @click="resetaudit(scope.row)">撤销审核</a>
                  </span>
                  </el-col>
                  <el-col :span="6">
                    <span v-if="scope.row.audit_status == 3 || scope.row.audit_status == 0" style="margin-right: 15px">
                      <a @click="submitAudit(scope.row.goodsId)">提交审核</a>
                     </span>
                  </el-col>
                  <el-col :span="6">
                    <span style="margin-right: 15px" v-if="scope.row.audit_status == 3">
<!--                      <a @click="edit(scope.row)">编辑</a>-->
                    </span>
                  </el-col>
                  <el-col :span="6">
                    <span style="margin-right: 15px" v-if="scope.row.audit_status != 3">
                     <span><a @click="deleteGood(scope.row)">删除</a></span>
                    </span>
                  </el-col>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :page-size="query.limit"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>

      <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <span style="color: #c0c4cc"
          >商品封面建议尺寸：300像素 * 300像素，图片大小不得超过1M</span
          >

          <el-button type="primary">上传图片</el-button>

          <el-divider></el-divider>
          <el-form-item label="商品名称">
            <el-input style="width: 500px" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="价格形式">
            <el-radio-group v-model="form.resource">
              <el-radio label="1">一口价</el-radio>
              <el-radio label="2">价格区间</el-radio>
              <el-radio label="3">显示折扣价</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="form.resource == 1" label="价格">
            <el-input clearable size="small" style="width: 200px"/>
            <span style="margin: 0 5px"> 元 </span>
          </el-form-item>

          <el-form-item v-if="form.resource == 2" label="价格区间">
            <el-input clearable size="small" style="width: 200px"/>
            <span style="margin: 0 5px"> - </span>
            <el-input style="width: 200px"/>
          </el-form-item>

          <el-form-item v-if="form.resource == 3" label="折扣区间">
            <el-input clearable size="small" style="width: 200px"/>
            <span style="margin: 0 5px"> - </span>
            <el-input style="width: 200px"/>
          </el-form-item>
          <el-form-item label="商品路径">
            <el-input style="width: 500px"/>
            <div>
              <span style="color: #c0c4cc"
              >请确保小程序页面路径可被访问。
                例如：pages/index/index.html?query_id=test_value</span
              >
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addGood">提交审核</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    getGoodsList,
    resetauditAudit,
    submitAudit,
    addGood,
    deleteGood,
  } from "@/api/applet/broadcastGood";

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      broadcastListStr: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      //这里存数据
      return {
        //单个商品数据
        form: {
          resource: "1",
        },
        //按钮聚焦
        autofocus: true,
        //添加商品弹出层
        dialogVisible: false,
        //商品数据
        info: [],
        //审核状态
        status: 0,
        //总数量
        total: 0,
        query: {
          offset: 1,
          limit: 5,
          status: 0,
        },
        resetauditData: {
          auditId: 0,
          goodsId: 0,
        },
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      toCommodity() {
        this.$router.push("/commodity/data");
      },
      //获取商品列表
      getData() {
        this.query.status = this.status;
        getGoodsList(this.query).then((response) => {
          this.info = response.data.goods;
          this.total = response.data.total;
        });
      },
      //撤销审核
      resetaudit(data) {
        this.resetauditData.auditId = data.auditId;
        this.resetauditData.goodsId = data.goodsId;
        resetauditAudit(this.resetauditData).then((response) => {
          this.statusCut(this.status)
        });
      },
      //编辑
      edit(data) {
        this.$router.push({path: "/commodity/data", query: {data}});
      },
      //重新提交审核
      submitAudit(goodsId) {
        submitAudit(goodsId).then((response) => {
          if (response.data) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.statusCut(this.status)
          } else {
            this.$message.error("网络繁忙，请稍后重试");
          }
        });
      },
      //删除商品
      deleteGood(goods) {
        let this_ = this
        this.$confirm("您确认删除【" + goods.name + "】商品吗？", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(function () {
          deleteGood(goods.goodsId).then((response) => {
            if (response.data) {
              this_.statusCut(this.status)
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message.error("网络繁忙，请稍后重试");
            }
          });
        });
      },
      //换页
      handleCurrentChange: function (cpage) {
        this.query.offset = cpage;
        this.getData();
      },
      //切换审核状态
      statusCut(status) {
        this.status = status;
        this.getData();
      },

      addGood() {
        addGood(this.form).then((response) => {
          this.dialogVisible = false;
        });
      },
      //状态
      state(auditStatus) {
        if (auditStatus == 0) {
          return "未审核";
        } else if (auditStatus == 1) {
          return "审核中";
        } else if (auditStatus == 2) {
          return "审核通过";
        } else if (auditStatus == 3) {
          return "审核失败";
        }
      },
      //转换微信图片
      imgTransition(img) {
        var imgid = Math.random(),
          frameid = 'frameimg' + imgid;
        window['img' + imgid] = '<img id="img" style="width:89px;height:89px" src=\'' + img + '?kilobug\' />' +
          '<script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; }<' + '/script>';
        let msg = '<iframe id="' + frameid + '" src="javascript:parent[\'img' + imgid + '\'];" frameBorder="0" scrolling="no" width="100px"></iframe>'
        return msg
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getData(0);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      // this.getData()
    },
    beforeCreate() {
    }, //生命周期 - 创建之前
    beforeMount() {
    }, //生命周期 - 挂载之前
    beforeUpdate() {
    }, //声明周期 - 更新之前
    updated() {
    }, //生命周期 - 更新之后
    beforeDestroy() {
    }, //生命周期 - 销毁之前
    destroyed() {
    }, //生命周期 - 销毁之后
    activated() {
    }, //缓存keep-alive
  };
</script>

<style scoped>
  .broadcast_storage {
    width: 80%;
    min-width: 1000px;
    margin: 30px auto 0;
  }

  .top_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .box-shadow {
    border: 1px solid #eee;
    width: 100%;
    height: auto;
    margin: 30px auto 0;
    background-color: whitesmoke;
    position: relative;
    background-color: white;
    border-radius: 10px;
    padding: 20px
  }

  .typeface {
    display: inline-block;
    font-size: 30px;
    color: #333;
    position: relative;
  }

  .typeface2 {
    color: #c0c4cc;
    font-size: 20px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .pagination {
    margin: 20px;
    display: flex;
    justify-content: flex-end;
  }
</style>
